<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>类别管理</title>
    <jsp:include page="../../template/head.jsp"/>
    <link rel="stylesheet" href="/static/assets/plugins/treetable/css/jquery.treetable.css">
    <link rel="stylesheet" href="/static/assets/plugins/treetable/css/jquery.treetable.theme.default.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <header class="main-header">
        <!-- Logo -->
        <a href="index2.html" class="logo">

            <span class="logo-lg">My Shop</span>
        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top">
            <!-- Sidebar toggle button-->


        </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <jsp:include page="../../template/menu.jsp"/>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                用户管理
                <small>用户列表</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 用户管理</a></li>
                <li class="active">用户列表</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <!-- Small boxes (Stat box) -->

            <div class="row">
                <div class="col-xs-12">
                    <div class="box box-info">
                        <!-- /.box-header -->
                        <div class="box-body table-responsive ">
                            <table id="example-advanced" class="table  table-hover table-bordered">
                                <tbody>
                                <tr>
                                    <th>类名</th>
                                    <th>操作</th>
                                </tr>
                                <c:forEach items="${categories}" var="item">
                                    <tr data-tt-id="${item.id}" data-tt-parent-id="${item.parentId}">
                                        <td>${item.name}</td>
                                        <td>
                                            <a type="button" class="btn  btn-info btn-xs" href="edit?id=${item.id}"><i class="fa fa-edit"></i> 修改</a>
                                            <a type="button" class="btn  btn-danger btn-xs" id="delete" data-id="${item.id}"><i class="fa fa-trash"></i> 删除</a>
                                        </td>
                                    </tr>

                                </c:forEach>


                                </tbody>
                            </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
            </div>

        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <jsp:include page="../../template/copyright.jsp"/>
    <!-- /.control-sidebar -->
    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->

</div>
<!-- ./wrapper -->

<jsp:include page="../../template/foot.jsp"/>

<script src="/static/assets/plugins/treetable/jquery.treetable.js"></script>
</body>


<script type="text/javascript">
    $(document).ready(function () {
        $("#example-advanced").treetable({expandable: true});

        App.myModal.init();
        $(document).on("click", "#delete", function () {
            var url = "/category/delete?id=" + $(this).data("id");
            App.myModal.showConfirm({url: url,success:function () {
                    window.location.reload();
                }});
        });

    });
</script>
</html>
